<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
  </head>
  <body style="padding: 15px">
    <!-- 添加图书的panel面板 -->

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <div class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            id="iptBookname"
            placeholder="请输入书名"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            id="iptAuthor"
            placeholder="请输入作者"
          />
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            id="iptPublisher"
            placeholder="请输入出版社"
          />
        </div>
        <button id="btnAdd" class="btn btn-primary">添加</button>
      </div>
    </div>

    <!-- 图书的表格 -->

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="td"></tbody>
    </table>
    <script>
      $(function () {
        // 获取图书列表的数据
        function getBooklist() {
          $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) {
            if (res.status !== 200) return alert("获取数据失败!");
            var rows = [];
            $.each(res.data, function (i, item) {
              rows.push(
                "<tr><td>" +
                  item.id +
                  "</td><td>" +
                  item.bookname +
                  "</td><td>" +
                  item.author +
                  "</td><td>" +
                  item.publisher +
                  '</td><td><a href="javascript:;" class = "del" data-id=' +
                  item.id +
                  ">删除</a></td></tr>"
              );
            });
            $("#td").empty().append(rows.join("")); //清空tbody的内容 然后追加rows
          });
        }
        getBooklist();
        // 事件委托 a为动态创建的元素 无法直接获取
        $("tbody").on("click", ".del", function () {
          var id = $(this).attr("data-id");
          $.get(
            "http://www.liulongbin.top:3006/api/delbook",
            { id: id },
            function (res) {
              if (res.status !== 200) return alert("删除图书失败!");
              getBooklist();
            }
          );
        });
        //
        $("#btnAdd").on("click", function () {
          // 去掉空格 严谨性
          var bookname = $("#iptBookname").val().trim();
          var author = $("#iptAuthor").val().trim();
          var publisher = $("#iptPublisher").val().trim();
          if (
            bookname.length <= 0 ||
            author.length <= 0 ||
            publisher.length <= 0
          ) {
            return alert("请填写完整的图书信息!");
          }
          $.post(
            "http://www.liulongbin.top:3006/api/addbook",
            {
              bookname: bookname,
              author: author,
              publisher: publisher,
            },
            function (res) {
              if (res.status !== 201) return alert("添加图书失败!");
              getBooklist(); // 渲染页面
              $("#iptBookname").val("");
              $("#iptAuthor").val("");
              $("#iptPublisher").val("");
            }
          );
        });
      });
    </script>
  </body>
</html>
